<template>
    <div class="box">
        <header class="header">
          <ul>
            <li @click="back"><i class="iconfont icon-jiantouarrowhead7"></i></li>
            <li><h5>制作相册</h5></li>
            <li></li>
          </ul>
        </header>
        <div class="content">
          <div class="photolist">
            <ul>
              <li>
                <img src="@/../static/13.jpg" alt="">
                <p>宝宝成长相册</p>
                <span>￥199.9</span>
                <i class="iconfont icon-xin"></i>
              </li>
              <!-- <li v-for="(item, index) of photolist" :key="index">
                <img :src="item.p_photo" alt="">
                <p>{{}}</p> 
                <span>￥199.9</span>
                <i class="iconfont icon-xin"></i>
              </li> -->
            </ul>
          </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      photolist: []
    }
  },
  methods: {
    back () {
      this.$router.go(-1)
    }
  },
  created() {
    // axios.get('sgj/myalbum/').then(data => {
    //   console.log(data.data.photos)
    //   this.photolist=data.data.photos
    // })
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.header {
  @include rect(100%, 0.4rem);
  @include background-color(#DFDFDF);
  ul {
    @include rect (95%, 100%);
    // background:red;
    margin:0 auto;
    @include flexbox();
    @include justify-content(space-between);
    @include align-items();
    li {
      i{
        @include font-size(0.15rem);
        @include text-color(#101010);
      }
      h5 {
        @include font-size(0.15rem);
        @include text-color(#101010);
        @include font-weight(100);
      }
    }
  }
}
.photolist {
  @include rect(90%, auto);
  margin:0.2rem 5%;
  li {
    @include rect(49%, 2rem);
    border-radius: 0.1rem;
    position: relative;
    float: left;
    margin-bottom:0.1rem;
    img {
      @include rect(100%, 100%);
    }
    p {
      position: absolute;
      @include rect(80%, 0.2rem);
      line-height: 0.2rem;
      top:0.08rem;
      left:0.1rem;
      color:#Fff;
    }
    span {
      position: absolute;
      @include rect(40%, 0.2rem);
      bottom:0.1rem;
      left:0.1rem;
      line-height: 0.2rem;
      color:#fff;
    }
    i {
      position: absolute;
      @include rect(10%, 0.2rem);
      bottom:0.1rem;
      right:0.1rem;
      line-height: 0.2rem;
      color:#fff;
    }
  }
  li:nth-of-type(odd){margin-right:2%}
}
</style>
